<template>
  <div class="home-container">
    <div class="home-header">
      <input type="text" v-model="content" @keyup.enter="addTodo">
    </div>
    <div class="home-body">
      <template v-for="(item,index) in todoList" :key="index">
        <div class="row"  v-if="showType=='all' || item.state==showType">
          <div class="row-hd" @click="changeTodoState(index)"><i class="el-icon-success" :class="item.state"></i></div>
          <div class="row-bd " :class="{'row-bd-complete':item.state=='complete'}">{{item.content}}</div>
          <div class="row-ft" @click="delTodo"><i class="el-icon-error"></i></div>
        </div>
      </template>
      <div class="null" v-if="todoList.length===0">null</div>
    </div>
    <div class="home-footer">
      <el-button @click="showType='all'" :type="showType=='all'?'primary':'info'">all</el-button>
      <el-button @click="showType='active'" :type="showType=='active'?'primary':'info'">active</el-button>
      <el-button @click="showType='complete'" :type="showType=='complete'?'primary':'info'">complete</el-button>
    </div>
  </div>
</template>

<script>
import {ref,watch,computed,toRaw} from 'vue'
import {useStore} from 'vuex'
export default {
  name: "Home",
  setup(){
    const store = useStore();
    const showType = ref("all");
    const content = ref("");
    const todoList = computed(()=>{
      return store.state.todoList;
    });

    function addTodo(){
      if(content.value){
        let obj = {
          state:'active',
          content:content.value,
        }
        store.commit('addTodo',obj)
        content.value = '';
      }
    }

    function changeTodoState(index){
      store.commit('changeTodoState',index)
    }
    function delTodo(index){
      store.commit('delTodo',index)
    }

    return {
      content,
      showType,
      todoList,
      addTodo,
      changeTodoState,
      delTodo,
    }
  }
}
</script>

<style scoped lang="scss">
  .home-container{
    width:50vw;
    min-height: 100px;
    border:1px solid #ccc;
    .home-header{
      width:50vw;
      height: 50px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      input{
        width: 100%;
        height: 40px;
        line-height: 40px;
        border:none;
        outline: none;
        box-sizing: border-box;
        padding:0px 10px;
      }
    }
    .home-body{
      width:100%;
      min-height: 100px;
      .row{
        width:100%;
        height: 50px;
        display: flex;
        align-items: center;
        .row-hd{
          width:50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          .active{
            color:#999;
          }
          .complete{
            color:#00a4ff;
          }
        }
        .row-bd{
          flex:1;
          line-height: 50px;
          height:50px;
        }
        .row-bd-complete{
          text-decoration: line-through;
        }
        .row-ft{
          width:50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .null{
        width:100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#999;
      }
    }
    .home-footer{
      height:50px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>